<template>
  <el-table
    ref="table"
    :data="data"
    v-bind="mergedProps"
    v-on="$listeners"
  >
    <el-table-column v-if="showIndex" label="序号" width="70">
      <template v-slot="{ $index }">
        {{ (current - 1) * pageSize + $index + 1 }}
      </template>
    </el-table-column>
    <template v-for="(col, index) in columns">
      <el-table-column
        :key="index"
        :prop="col.prop"
        :label="col.label"
        v-bind="col.attrs || {}"
        :show-overflow-tooltip="
          !col.attrs || col.attrs.showOverflowTooltip !== false"
        :formatter="(row, column, cellValue, index) =>formatCell(row, column, cellValue, index, col.formatter)"
      >
        <!-- 自定义表头 header slot-->
        <template v-if="col.headerSlot" v-slot:header="scope">
          <slot :name="col.headerSlot" v-bind="scope" />
        </template>
        <!--自定义列 模板写法-->
        <template v-if="col.slot" v-slot="scope">
          <slot :name="col.slot" v-bind="scope" />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import { formatDate, formatMoney, toFixedBig } from '@/utils'

export default {
  name: 'TpTable',
  props: {
    columns: {
      required: true,
      type: Array,
      default: () => []
    },
    data: {
      required: true,
      type: Array,
      default: () => []
    },
    nullCellText: {
      type: String,
      default: '-'
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    current: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {}
  },
  computed: {
    mergedProps() {
      return {
        border: true,
        stripe: true,
        'highlight-current-row': true,
        ...this.$attrs
      }
    }
  },
  methods: {
    getRef() {
      return this.$refs.table
    },
    formatCell(row, column, cellValue, index, formatter) {
      const type = typeof formatter
      if (type === 'function') {
        return formatter({ row, column, cellValue, index })
      }
      if (
        cellValue === null ||
        cellValue === '' ||
        typeof cellValue === 'undefined'
      ) {
        return this.nullCellText
      }
      if (!formatter) {
        return cellValue
      }
      if (type === 'string') {
        switch (formatter) {
          case 'date':
            return formatDate(cellValue, 'yyyy-MM-dd')
          case 'time':
            return formatDate(cellValue, 'yyyy-MM-dd hh:mm:ss')
          case 'money': // 金额三位分割
            return formatMoney(cellValue)
          case 'point2': // 保留两位小数
            return toFixedBig(cellValue, 2)
          case 'integer': // 正整数
            return parseInt(cellValue)
          default:
            return cellValue
        }
      }
      if (type === 'object') {
        if (formatter.type && formatter.type === 'date') {
          return formatDate(cellValue, formatter.content)
        }
        if (formatter.type && formatter.type === 'dict') {
          return formatter.dict[cellValue]
        }
      }
      return cellValue
    }
  }
}
</script>

<style lang="scss" scoped></style>
